<template>
	<view style="padding: 30rpx;box-sizing: border-box;">
		<view class="lb-ad" v-for="(item,index) in listData" :key="index">
			<view class="ad-img">
				<image :src="getImgUrl(item.goods_info.cover_image)" mode="aspectFill"></image>
			</view>
			<view class="ad-info">
				<view class="ad-name u-line-2">
					{{item.goods_info.name}}
				</view>
				<view class="ad-price">
					<view class="left">{{item.price ||  0}}</view>
					<view class="centre">
						{{item.goods_info.price}}
					</view>
					<!-- <view class="right" v-if="item.amount > 1">任洗{{item.amount}}件</view> -->
				</view>
				<view class="a_frame">
					{{item.a_frame}}
				</view>
				<view class="a_frame2">
					活动时间：{{item.s_frame_start_time_text}}~{{item.s_frame_end_time_text}}
				</view>
				<view class="sd-bt">
					<view class="ad-btn" @click="goTo('/pages/flash-killing-detail/flash-killing-detail?id=' + item.id)" v-if="currentHour >= item.s_frame_start_time && currentHour <= item.s_frame_end_time">
						立即抢购
					</view>
					<view @click="goTo('/pages/flash-killing-detail/flash-killing-detail?id=' + item.id)" class="ad-btn ad-btn_2" v-else-if="currentHour < item.s_frame_start_time">
						未开始
					</view>
					<view @click="goTo('/pages/flash-killing-detail/flash-killing-detail?id=' + item.id)" class="ad-btn ad-btn_2" v-else-if="currentHour > item.s_frame_end_time">
						已结束
					</view>
				</view>
				<!-- <view class="ad-icon">
					<image src="/static/icon/8.png" mode=""></image>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		payWashSeckillApiList
	} from "@/api/apis/wash.js"
	import {
		setImgUrl
	} from "@/utils/comm.js"
	export default {
		data() {
			return {
				page: 1,
				limit: 10,
				listData: [],
				isLoading: false,
				currentHour: '',
				intervalId: '',
			}
		},
		onLoad(options) {
			this.getList()
		},
		created() {
			var currentDate = new Date();
			this.currentHour = this.setHour(currentDate.getHours());
			this.tasks();
		},
		onReachBottom() {
			//注意 这里是重要的一步，不满足条件下拉加载不能继续请求数据
			if (!this.isLoading) {
				this.getList();
			}

		},
		beforeDestroy() {
			// console.log(5555)
			clearInterval(this.timeoutId);
		},
		methods: {
			//定时任务
			tasks() {
				let _this = this;
				this.intervalId = setInterval(res => {
					// console.log('定时任务执行了')
					var currentDate = new Date();
					_this.currentHour = _this.setHour(currentDate.getHours());
					// console.log(_this.currentHour)
				}, 1000 * 60)
			},
			setHour(hour) {
				if (hour < 10) {
					return '0' + hour + ':00';
				} else {
					return hour + ':00';
				}
			},

			//跳转
			goTo(url) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			},
			//列表
			getList() {
				uni.showLoading({
					title: "加载中",
					mask: true
				});
				this.isLoading = true;
				payWashSeckillApiList({
					page: this.page,
					limit: this.limit,
				}).then(res => {
					uni.hideLoading();
					let list = res.data;
					if (this.page == 1) {
						this.listData = list;
					} else {
						this.listData = this.listData.concat(list);
					}
					if (list.length > 0) {
						//请求成功 节流阀 设置为false（没有走完函数不允许再次请求）
						this.isLoading = false;
						this.page++;
					}
				})
			},
			getImgUrl(url) {
				return setImgUrl(url);
			},
		}
	}
</script>

<style lang="scss">
	.lb-ad {
		background: rgba(255, 255, 255, 0.39);
		box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.16);
		opacity: 1;
		border-radius: 16rpx;
		display: flex;
		flex-direction: row;
		margin-bottom: 24rpx;

		.ad-img {
			width: 350rpx;
			height: 280rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 16rpx 0 0 16rpx;

			}
		}

		.ad-info {
			width: calc(100% - 350rpx);
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			padding: 0 12rpx 0 24rpx;
			box-sizing: border-box;

			.ad-name {
				font-size: $main-font-24;
				font-weight: bold;
				color: $main-font-color-grey6;
			}

			.ad-price {
				display: flex;
				flex-direction: row;
				align-items: center;

				.left {

					font-size: $main-font-36;
					font-weight: bold;
					color: #2F2D2E;

					&::before {
						content: '¥';
						font-size: $main-font-20;
					}

				}

				.centre {
					font-size: $main-font-24;
					color: $main-font-color-grey6;
					text-decoration: line-through;
					margin-left: 12rpx;

					&::before {
						content: '¥';
						font-size: $main-font-24;
					}
				}

				.right {
					font-size: $main-font-18;
					font-weight: 400;
					color: $main-font-color-grey6;
					padding-left: 12rpx;
					box-sizing: border-box;
				}
			}

			.a_frame {
				font-size: $main-font-24;
				color: $main-font-color-grey6;
			}

			.a_frame2 {
				font-size: $main-font-24;
				color: #F7583F;
			}

			.sd-bt {
				display: flex;
				justify-content: flex-end;
			}

			.ad-btn {
				border: 2rpx solid #F67F7D;
				background: linear-gradient(131deg, #F7583F 0%, #F28F4C 100%);
				border-radius: 16rpx;
				font-size: $main-font-18;
				font-weight: 400;
				color: $main-font-color-white;
				width: 96rpx;
				height: 30rpx;
				line-height: 28rpx;
				text-align: center;



			}


			.ad-btn_2 {
				border: 2rpx solid #999999;
				background: linear-gradient(131deg, #999999 0%, #666666 100%);
			}

			.ad-icon {
				width: 73rpx;
				height: 14rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

	}
</style>